<template>
	<MesBox v-model="model" :lazy="true" title="选择产品" :height="700" :width="1500" :padding="15">
		<!-- 设置查询条件 -->
		<div style="padding-bottom: 10px">
			<span style="margin-right: 10px;">产品编码：</span>
			<el-input placeholder="请输入项目编码" style="width: 200px" v-model="ProductCode" />
			<span style="margin-right: 10px;margin-left: 20px;">产品名称：</span>
			<el-input placeholder="请输入产品名称" style="width: 200px" v-model="ProductName" />
			<el-button type="primary" style="margin-left:20px" size="medium" @click="search"><i
					class="el-icon-search"></i>搜索</el-button>

		</div>

		<!-- imes-table配置的这些属性见MesTable组件api文件 -->
		<mes-table ref="mytable" :loadKey="true" :columns="columns" :pagination="pagination" :pagination-hide="false"
			:max-height="600" :url="url" :index="true" :single="false" :defaultLoadPage="defaultLoadPage"
			@loadBefore="loadTableBefore" @loadAfter="loadTableAfter"></mes-table>
		<!-- 设置弹出框的操作按钮 -->
		<template #footer>
			<div>
				<el-button size="mini" type="primary" @click="addRow()"><i class="el-icon-plus"></i>添加选择的数据</el-button>
				<el-button size="mini" @click="model = false"><i class="el-icon-close"></i>关闭</el-button>
			</div>
		</template>
	</MesBox>
</template>
<script>
import MesBox from "@/components/basic/MesBox.vue";
import MesTable from "@/components/basic/MesTable.vue";
import { thisTypeAnnotation } from "@babel/types";
export default {
	components: {
		MesBox: MesBox,
		MesTable: MesTable,
	},
	data() {
		return {
			model: false,
			defaultLoadPage: false, //第一次打开时不加载table数据，openDemo手动调用查询table数据
			ProductName: "", //查询条件字段
			ProductCode: "", //查询条件字段
			url: "api/Basicdata_Product/GetPageData",//加载数据的接口
			columns: [{ field: 'Product_Id', title: '产品定义主键ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
			{ field: 'ProductCode', title: '产品编号', type: 'string', sort: true, width: 180, align: 'left', sort: true },
			{ field: 'ProductName', title: '产品名称', type: 'string', link: true, sort: true, width: 180, require: true, align: 'left' },
			{ field: 'Unit_Id', title: '库存单位', type: 'int', bind: { key: 'unitList', data: [] }, width: 110, require: true, align: 'left' },
			{ field: 'ProductStandard', title: '产品规格', type: 'string', width: 180, align: 'left' },
			{ field: 'ProductAttribute', title: '产品属性', type: 'string', bind: { key: 'productAttr', data: [] }, width: 180, require: true, align: 'left' },
			{ field: 'Process_Id', title: '工艺路线', type: 'int', bind: { key: 'processLineList', data: [] }, width: 110, align: 'left' },
			{ field: 'MaxInventory', title: '最大库存', type: 'int', sort: true, width: 110, align: 'left' },
			{ field: 'MinInventory', title: '最小库存', type: 'int', sort: true, width: 110, align: 'left' },
			{ field: 'SafeInventory', title: '安全库存', type: 'int', sort: true, width: 110, align: 'left' },
			{ field: 'InventoryQty', title: '库存数量', type: 'int', sort: true, width: 110, align: 'left' },
			{ field: 'FinishedProduct', title: '成品图', type: 'img', width: 180, align: 'left' },
			{ field: 'CreateDate', title: '创建时间', type: 'datetime', sort: true, width: 110, align: 'left', sort: true },
			{ field: 'CreateID', title: '创建人编号', type: 'int', width: 80, hidden: true, align: 'left' },
			{ field: 'Creator', title: '创建人', type: 'string', width: 130, align: 'left' },
			{ field: 'Modifier', title: '修改人', type: 'string', width: 130, align: 'left' },
			{ field: 'ModifyDate', title: '修改时间', type: 'datetime', sort: true, width: 110, align: 'left', sort: true },
			{ field: 'ModifyID', title: '修改人编号', type: 'int', width: 80, hidden: true, align: 'left' }],
			pagination: {}, //分页配置，见mestable组件api
		};
	},
	methods: {
		open() {
			this.model = true;
			//打开弹出框时，加载table数据
			this.$nextTick(() => {
				this.$refs.mytable.load();
			});
		},
		search() {
			//点击搜索
			this.$refs.mytable.load();
		},
		getFieldDicValue(fieldName, fieldValue) {
			this.columns.forEach(item => {
				if (item.field == fieldName) {
					var result = item.bind.data.find(val => val.key == fieldValue)
					return result;
				}
			})
		},
		addRow() {
			var rows = this.$refs.mytable.getSelected();
			if (!rows || rows.length == 0) {
				return this.$message.error("请选择行数据");
			}
			this.model = false;
			//获取回写到明细表的字段
			let _rows = rows.map((row) => {
				return {
					Mass_DetectionTemplate_Product_Product_ID: row.Product_Id,
					Mass_DetectionTemplate_Product_ProductCode: row.ProductCode,
					Mass_DetectionTemplate_Product_ProductName: row.ProductName,
					Mass_DetectionTemplate_Product_ProductStandard: row.ProductStandard,
				};
			});
			this.$parent.setTable2Rows(_rows);
		},
		//这里是从api查询后返回数据的方法
		loadTableAfter(row) { },
		loadTableBefore(params) {
			//查询前，设置查询条件
			if (this.ProductCode) {
				params.wheres.push({ name: "ProductCode", value: this.ProductCode, displayType: "like" });
			}
			if (this.ProductName) {
				params.wheres.push({ name: "ProductName", value: this.ProductName, displayType: "like" });
			}
			return true;
		},
	},
};
</script>